<template>
  <div class="EnterpriseAudit content-container">
    <div class="tittle">审核管理-企业信息审核</div>
    <div class="Ltop">
      <button
        v-for="(item,index) in btnlist"
        :key="index"
        @click="doClick(index)"
        :class="{active:item.isActive}"
      >{{item.name}}</button>
    </div>
      <div class="Lcontent op" v-loading="loading"  >
            <el-table :header-cell-style="{background:'rgba(247,249,252,1)',color:'#1F2E4D',}"
                    :row-class-name:hover="{background:'red'}"
                    border   ref="table" height="100%" :data="table.data" style="width: 100%">
              <el-table-column align="center" prop="fullName" label="公司名称" ></el-table-column>
              <el-table-column align="center" prop="nums" label="职位个数" ></el-table-column>
              <el-table-column align="center" prop="types" label="企业类型" ></el-table-column>
              <el-table-column align="center" prop="contactName" label="联系人" ></el-table-column>
              <el-table-column align="center" prop="rdtime" label="注册时间" min-width="160" ></el-table-column>
              <transition name="show">
                <el-table-column v-if="query.checkState==1" align="center" prop="tryCooperNum" label="试用期"  :key="Math.random()">
                  <template slot-scope="scope">
                    <div>{{scope.row.tryCooperNum?scope.row.tryCooperNum+'天':''}}</div>
                  </template>
                </el-table-column>
                <el-table-column v-if="query.checkState==1" align="center" prop="remainCooperdays" width="130" label="试用期剩余时间" :key="Math.random()" >
                  <template slot-scope="scope">
                    <div>{{scope.row.tryCooperNum?scope.row.remainCooperdays+'天':''}}</div>
                  </template>
                </el-table-column>
              </transition>
              <el-table-column align="center" prop="ldate" label="操作" :key="Math.random()">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleClick(scope.row)">{{msg}}</el-button>
                </template>
              </el-table-column>
            </el-table>
      </div>
      <div class="fen">
          <el-pagination
            background
            @current-change="pageChange"
            :current-page.sync="query.currPageNo"
            :page-size="query.pageSize"
            layout="total,prev, pager, next"
            :total="table.total"></el-pagination>
      </div>
  </div>
</template>

<script>
export default {
  name: "EnterpriseAudit",
  data() {
    return {
      tableHeight: window.innerHeight * 0.5,
      loading:false,
      btnlist: [
        { name: "待审核", isActive: true },
        { name: "试用合作", isActive: false },
        { name: "已合作", isActive: false },
        { name: "暂不合作", isActive: false },
        { name: "异常", isActive: false }
      ],
      tableData: [],
      msg: "审核", //审核通过  msg=修改
      currPageNo: 1,
      pageSize: 20,
      query:{
        checkState:0,
        currPageNo: 1,
        pageSize: 10,
      },
      table:{
        data:[],
        total:1,
      },
    };
  },
  methods: {
    pageChange(){
      this._getData()
    },
    _getData(){
      this.loading=true
      this.lAxios({
        method: "post",
        url: "/platform/getCompanyExamine.do",
        params: {
          ...this.query
        }
      }).then(res => {
          if (res.data.status == 0) {
            this.table.data = res.data.data.list;
            this.table.total = res.data.data.total;
          } else {
            this.$message(res.data.msg);
          }
        })
        .finally(err => {
          this.loading=false
        });
    },
    doClick(obj) {
      this.query.checkState = obj
      console.log('index',this.query.checkState)
      this.btnlist.forEach(item => {
        item.isActive = false;
      });
      this.btnlist[obj].isActive = true;
      this.msg = obj == 0 ? "审核" : "修改";
      this._getData()
    },
    handleClick(row) {
      // //1.存放人才对象
      // localStorage.setItem("company_rowInfo", JSON.stringify(row));
      // //2.存放按钮信息
      // this.btnlist.forEach(itme => {
      //   if (itme.isActive == true) {
      //     localStorage.setItem("button", itme.name);
      //   }
      // });
      //3.跳转
      // this.$router.push("/EnterpriseCont");

      this.$router.push({
        name:'EnterpriseCont',
        params:{
          id:row.id
        }
      });
    }
  },
  mounted(){
    // this.$nextTick(function () {
    //   let self = this;
    //   window.onresize = function () {
    //     self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - 38
    //     _d.eah = self.tableHeight;
    //     console.log("databaseT", self.tableHeight)
    //   }
    // })
  },
  activated() {
    if(this.$route.query.hasOwnProperty('checkState')){
         let checkState = this.$route.query.checkState;
         this.doClick(checkState);
    }else{
      var name = this.$route.query.name;
      if (name == undefined || name == "待审核") {
        this.doClick(0);
      } else if (name == "试用合作") {
        this.doClick(1);
      } else if (name == "已合作") {
        this.doClick(2);
      } else if (name == "暂不合作") {
        this.doClick(3);
      }
    }
  }
};
</script>

<style scoped>
  .show-enter-active,.show-leave-active{
            transition:all 2s;}
  .show-enter,.show-leave-to{
                   margin-left: 100px;}
  .show-enter-to,.show-leave{
                   margin-left:0px;}
.EnterpriseAudit {
  background-color: #f7f9fc;
  padding-left: 20px;
  /*height: 600px;*/
}
.op{
  height:calc(100vh - 300px);
  overflow: auto;
}
.tittle {
  height: 54px;
  line-height: 54px;
  color: #3d4966;
  font-size: 14px;
}
.Ltop {
  padding: 40px 0 20px 40px;
  background-color: #fff;
}
.Ltop > button {
  border-radius: 5px;
  border: 1px solid #e6e9f0;
  background-color: #f7f9fc;
  height: 50px;
  width: 125px;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  margin-right: 25px;
  display: inline-block;
}
.Ltop > span:nth-child(1) {
  width: 125px;
  height: 50px;
}
.Ltop > span:nth-child(2) {
  width: 125px;
  height: 50px;
}
.Ltop > span:nth-child(3) {
  width: 125px;
  height: 50px;
  margin-right: 20px;
}
.Ltop > span:nth-child(4) {
  width: 125px;
  height: 50px;
  margin-right: 20px;
}

.active {
  background-color: #3377ff !important;
  color: #fff;
}

.Lcontent {
  background-color: #fff;
  padding: 0 40px;
  /*height:276px ;*/
  /*background-color: #f2f2f2;*/
  /* border: 1px solid #797979; */
}
/*-------------------tabel-------------------------*/
.Ltabel {
  margin-bottom: 40px;
}
.fen {
  background-color: #fff;
  margin-right: 40px;
}
.el-pagination {
  float: right;
}
.btn {
 height: 40px;
 width: 140px;
 box-sizing: border-box;
  color: #3377FF;
  border:1px solid #3377FF;
  border-radius: 5px;
  padding: 5px 10px;
 margin: 0px 60px !important;
}

</style>
